<template>
  <view class="settings-container">
    <!-- 头部导航 -->
    <view class="header">
      <view class="back-btn" @click="goBack">←</view>
      <view class="title">个人信息设置</view>
      <view class="save-btn" @click="saveSettings">保存</view>
    </view>

    <!-- 个人头像 -->
    <view class="section">
      <view class="section-title">个人头像</view>
      <view class="avatar-section">
        <view class="avatar-hint">点击更换头像</view>
        <view class="avatar-container" @click="changeAvatar">
          <view class="avatar">👤</view>
        </view>
        <view class="change-avatar-btn" @click="changeAvatar">更换头像</view>
      </view>
    </view>

    <!-- 基本信息 -->
    <view class="section">
      <view class="section-title">基本信息</view>
      
      <view class="form-item">
        <view class="label">姓名*</view>
        <input class="input" v-model="formData.name" placeholder="请输入姓名" />
      </view>

      <view class="form-item">
        <view class="label">手机号码*</view>
        <view class="phone-input">
          <input class="input" :value="maskedPhone" disabled />
          <text class="verified-text">已验证</text>
        </view>
      </view>

      <view class="form-item">
        <view class="label">电子邮箱</view>
        <input class="input" v-model="formData.email" placeholder="请输入电子邮箱 (选填)" />
      </view>

      <view class="form-item">
        <view class="label">所属机构*</view>
        <input class="input" v-model="formData.organization" placeholder="请输入所属机构" />
      </view>

      <view class="form-item">
        <view class="label">执业证号</view>
        <input class="input" v-model="formData.licenseNumber" placeholder="请输入执业证号 (选填)" />
      </view>
    </view>

    <!-- 职业信息 -->
    <view class="section">
      <view class="section-title">职业信息</view>
      
      <view class="form-item">
        <view class="label">专业领域</view>
        <view class="field-tags">
          <view 
            class="field-tag" 
            v-for="(field, index) in formData.fields" 
            :key="index"
            @click="removeField(index)"
          >
            {{ field }} ×
          </view>
          <view class="add-field-btn" @click="addField">
            添加专业领域标签
          </view>
        </view>
      </view>
    </view>

    <!-- 个人简介 -->
    <view class="section">
      <view class="section-title">个人简介</view>
      <textarea 
        class="textarea" 
        v-model="formData.introduction" 
        placeholder="请简要介绍您的专业背景和执业经验 (选填, 最多500字)"
        maxlength="500"
      ></textarea>
    </view>
  </view>
</template>

<script>
import { getCurrentUser, setCurrentUser } from '../../src/services/userService.js'

export default {
  data() {
    return {
      formData: {
        name: '',
        email: '',
        organization: '',
        licenseNumber: '',
        fields: [],
        introduction: ''
      },
      maskedPhone: '138****5678',
      availableFields: [
        '合同纠纷', '知识产权', '劳动争议', '婚姻家庭', 
        '交通事故', '刑事辩护', '行政诉讼', '公司法务',
        '房地产', '金融证券', '医疗纠纷', '环境保护'
      ]
    }
  },
  onLoad() {
    this.loadUserData()
  },
  methods: {
    loadUserData() {
      const user = getCurrentUser()
      if (user) {
        this.formData = {
          name: user.name || '',
          email: user.email || '',
          organization: user.organization || '',
          licenseNumber: user.licenseNumber || '',
          fields: user.fields || [],
          introduction: user.introduction || ''
        }
        this.maskedPhone = user.phone ? user.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : '138****5678'
      }
    },
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          uni.showToast({ title: '头像上传成功', icon: 'success' })
          // 这里可以上传到服务器
        },
        fail: (err) => {
          console.log('选择图片失败', err)
        }
      })
    },
    addField() {
      const that = this
      const availableFields = this.availableFields.filter(field => !this.formData.fields.includes(field))
      
      if (availableFields.length === 0) {
        uni.showToast({ title: '没有更多专业领域可选', icon: 'none' })
        return
      }
      
      uni.showActionSheet({
        itemList: availableFields,
        success: function (res) {
          const selectedField = availableFields[res.tapIndex]
          if (selectedField && that.formData.fields.length < 5) {
            that.formData.fields.push(selectedField)
          } else if (that.formData.fields.length >= 5) {
            uni.showToast({ title: '最多选择5个专业领域', icon: 'none' })
          }
        }
      })
    },
    removeField(index) {
      this.formData.fields.splice(index, 1)
    },
    saveSettings() {
      // 验证必填字段
      if (!this.formData.name) {
        uni.showToast({ title: '请输入姓名', icon: 'none' })
        return
      }
      if (!this.formData.organization) {
        uni.showToast({ title: '请输入所属机构', icon: 'none' })
        return
      }

      // 保存用户信息
      const user = getCurrentUser() || {}
      const updatedUser = {
        ...user,
        ...this.formData
      }
      setCurrentUser(updatedUser)

      uni.showToast({ title: '保存成功', icon: 'success' })
      setTimeout(() => {
        uni.navigateBack()
      }, 500)
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.settings-container {
  min-height: 100vh;
  background: #f7f8fa;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background: #fff;
  border-bottom: 2rpx solid #f1f5f9;
}

.back-btn {
  font-size: 32rpx;
  color: #3b82f6;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1f2937;
}

.save-btn {
  font-size: 28rpx;
  color: #3b82f6;
  font-weight: 600;
}

.section {
  background: #fff;
  margin-bottom: 16rpx;
  padding: 32rpx 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 24rpx;
}

.avatar-section {
  text-align: center;
}

.avatar-hint {
  font-size: 26rpx;
  color: #6b7280;
  margin-bottom: 24rpx;
}

.avatar-container {
  margin-bottom: 24rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48rpx;
  color: #6b7280;
  margin: 0 auto;
}

.change-avatar-btn {
  display: inline-block;
  padding: 12rpx 24rpx;
  background: #3b82f6;
  color: #fff;
  border-radius: 20rpx;
  font-size: 26rpx;
}

.form-item {
  margin-bottom: 32rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 28rpx;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16rpx;
}

.input {
  width: 100%;
  height: 88rpx;
  background: #f9fafb;
  border: 2rpx solid #e5e7eb;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #1f2937;
}

.phone-input {
  position: relative;
}

.verified-text {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24rpx;
  color: #6b7280;
}

.field-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  align-items: center;
}

.field-tag {
  background: #3b82f6;
  color: #fff;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.add-field-btn {
  background: #f9fafb;
  color: #6b7280;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  border: 2rpx dashed #d1d5db;
}

.textarea {
  width: 100%;
  min-height: 200rpx;
  background: #f9fafb;
  border: 2rpx solid #e5e7eb;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  color: #1f2937;
  line-height: 1.5;
}
</style>
